<template>
  <div class="algContent">
    <el-divider content-position="left" class="algUpTitle">{{$t('ALG协议设置')}}</el-divider>
    <div v-for="(item, key) in  algList " :key="key">
      <el-row :gutter="20" v-if="key.indexOf('nat_') < 0">
        <el-col :span="12">
          <span class='algTitle'>{{ key }}</span>
          <el-switch :width="45" v-model="algList[key]" :class="'switch ' + key" :disabled='(key === "ftp" && algList["nat_ftp"] === "enable") || (key === "opc" && algList["nat_opc"] === "enable")' @change='protectAllChange($event, key)' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('开')" :inactive-text="$t('关')"></el-switch>
        </el-col>
        <el-col :span="12">
          <span class='algTitle'>{{ algList['nat_' + key] ? 'nat_' + key : '' }}</span>
          <el-switch :width="45" v-model="algList['nat_' + key]" v-if="algList['nat_' + key]" :class="'switch nat_' + key" @change='protectAllChange($event, `nat_${key}`)' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('开')" :inactive-text="$t('关')"></el-switch>
        </el-col>
      </el-row>
    </div>
    <el-divider content-position="left" class="algUpTitle">{{$t('ALG基础配置')}}</el-divider>
    <el-form ref="form" :model="record" :label-width="lang === 'zh' ?'150px':'200px'" :rules="rules" label-position="left" style="margin:0 30px;">
      <el-form-item :label="$t('预期端口阈值')" prop="expect_port_num">
        <el-input v-emoji v-model="record.expect_port_num" style="width:300px;" size='small' @blur="expectPortNumBlur"></el-input>
      </el-form-item>
      <el-form-item :label="$t('OPC预期端口超时时间')" prop="timeout">
        <el-input v-emoji v-model="record.timeout" style="width:300px;" size='small' @blur="timeoutBlur"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getAlgInfo, setAlgInfo, getOpcTimeout, getExpectMax, setExpectMax, setOpcTimeout } from '@/api/safe/alg'
export default {
  name: 'alg',
  data () {
    return {
      lang: this.$i18n.locale,
      algList: {},
      record: {
        expect_port_num: '',
        expect_port_num_old: '',
        timeout: '',
        timeout_old: ''
      },
      rules: {}
    }
  },
  created () {
    this.listData()
    getOpcTimeout().then(res => {
      this.record.timeout = res.info.timeout
      this.record.timeout_old = res.info.timeout
    })
    getExpectMax().then(res => {
      this.record.expect_port_num = res.info.expect_port_num
      this.record.expect_port_num_old = res.info.expect_port_num
    })
  },
  methods: {
    listData () {
      getAlgInfo().then(res => {
        if (res.status === 0) {
          res.info.forEach((item, index) => {
            this.algList[item.mode_name] = item.status === 1 ? 'enable' : 'disable'
          })
          this.$forceUpdate()
        }
      })
    },
    protectAllChange (status, name) {
      setAlgInfo({ name: name, status: status }).then(res => {
        // if (res.status === 0) {
        this.listData()
        // }
      }).catch(e => {
        this.algList[name] = (status === 'disable' ? 'enable' : 'disable')
      })
    },
    expectPortNumBlur () {
      if (isNaN(Number(this.record.expect_port_num))) {
        this.$messages.error('只能输入数字')
      } else if (!this.isInteger(this.record.expect_port_num)) {
        this.$messages.error('只能输入整数')
      } else if (Number(this.record.expect_port_num) < 0 || Number(this.record.expect_port_num) > 65535) {
        this.$messages.error('输入范围0-65535')
      } else if (this.record.expect_port_num !== this.record.expect_port_num_old) {
        setExpectMax({ expect_port_num: this.record.expect_port_num }).then(res => {
          this.$messages.success(res.msg)
          this.record.expect_port_num_old = this.record.expect_port_num
        })
      }
    },
    timeoutBlur () {
      if (isNaN(Number(this.record.timeout))) {
        this.$messages.error('只能输入数字')
      } else if (!this.isInteger(this.record.timeout)) {
        this.$messages.error('只能输入整数')
      } else if (Number(this.record.timeout) < 0 || Number(this.record.timeout) > 4294967295) {
        this.$messages.error('输入范围0-4294967295')
      } else if (this.record.timeout !== this.record.timeout_old) {
        setOpcTimeout({ timeout: this.record.timeout }).then(res => {
          this.$messages.success(res.msg)
          this.record.timeout_old = this.record.timeout
        })
      }
    },
    isInteger (value) {
      return (!isNaN(value) && (parseInt(value).toString().length === String(Number(value)).length))
    }
  }
}
</script>
<style lang="less" scoped>
.algContent {
  width: 700px;
  margin: 0 auto;
  padding-top: 1px;
  line-height: 40px;

  .el-col {
    width: 340px;
    margin: 2px;
    background-color: #eeeeee;
  }

  .el-row {
    width: 700px;
    margin: 0 !important;
  }

  .ivu-switch-checked {
    border-color: #5fb878;
    background-color: #5fb878;
  }
}

.algTips {
  font-size: 12px;
  color: red;
}

.algTitle {
  width: 230px;
  margin-left: 20px;
  display: inline-block;
}

.algUpTitle {
  margin-bottom: 30px;

  .el-divider__text,
  .el-link {
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
